<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>我的家乡-景点篇</title>

  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animate.min.css">

</head>

<body>
  <div class="wrap">
    <!-- header部分 -->
    <div class="header">
      <div class="content">
        <div class="header-left">
          <a href="map.html">
            <h3>我的家乡</h3>
          </a>
        </div>
        <div class="header-mid">
          <ul id="nav" class="animated fadeInLeft">
            <li><a href="index.html"><span>首页</span></a></li>
            <li><a href="food.html"><span>美食</span></a></li>
            <li class="active"><a href="scenery.html"><span>景点</span></a></li>
            <li><a href="custom.html"><span>民俗</span></a></li>
          </ul>
        </div>
        <div class="header-right">
          <a href="https://www.cnbz.gov.cn/zjbz/index.html"><button>Welcome</button></a>
        </div>
      </div>
    </div>
    <!-- scenery-one部分 -->
    <div class="scenery-one">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-side-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-side-to="1"></li>
          <li data-target="#carousel-example-generic" data-side-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>恩阳古镇</h2>
                    <p>建筑被称为凝固的艺术，建筑本身承载着许多人文元素。<br>
                      古镇的建筑风格与川北风格一脉相承。<br>
                      白色的土墙保护着墙内的竹篱板。青石板铺就了这里的每一寸土地。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/恩阳古镇.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
          <div class="item">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>南龛摩崖造像</h2>
                    <p>南龛造像融合了蜀地的民俗风情。<br>
                      各种佛像精巧玲珑，姿态各异，气质浑厚，端庄丰满，神情潇洒，典雅大方。<br>
                      南龛摩崖造像是古代劳动人民巧夺天工的艺术精品。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/南龛摩崖造像.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
          <div class="item">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>佛头山</h2>
                    <p>附近众山簇拥环护，状如众星拱月。<br>
                      佛头山因传说“观音大士派佛头童子下凡镇守龙潭溪”而得名。<br>
                      佛头山佛光乃天下奇观，由于“佛光”的形成条件非常特殊，故又名“宝光”。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/佛头山.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-side="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-side="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- scenery-two部分 -->
    <div class="scenery-two">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-side-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-side-to="1"></li>
          <li data-target="#carousel-example-generic" data-side-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>诺水河风景区</h2>
                    <p>世界地质公园 、国家AAAA级景区。<br>
                      景区由“诺水洞天”、“临江丽峡景区”、“空山天盆”、“唱歌石林”四大独立景区组成。<br>
                      中峰洞被中国溶洞协会会长考察认定为“天下第一洞”。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/诺水河风景区.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
          <div class="item">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>水宁寺造像</h2>
                    <p>“水宁盛唐彩雕全国第一”，“巴中石窟，国之瑰宝”。<br>
                      造像多为盛唐作品，少数为晚唐雕刻。<br>
                      堪称我国唐代石窟艺术中高水平的作品之一。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/水宁寺造像.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
          <div class="item">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>红四方面军通江旧址群</h2>
                    <p>纪念中国工农红军第四方面军创建、发展、壮大川陕苏区。<br>
                      前中共中央总书记、中华人民共和国主席、中央军委主席江泽民题写了馆名。<br>
                      馆内现展出、收藏川陕苏区时期史料、图片、实物及历史文物7800余件。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/红四方面军通江旧址群.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-side="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-side="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- scenery-three部分 -->
    <div class="scenery-three">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-side-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-side-to="1"></li>
          <li data-target="#carousel-example-generic" data-side-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>阴宁山</h2>
                    <p>历史悠久，自北魏以来就是道教、佛教圣地。<br>
                      享誉川北，有：“川北胜秀”之美誉。<br>
                      阴灵山石刻碑林文化为中国四大书法碑林之一。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/阴宁山.jpg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
          <div class="item">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>光雾山</h2>
                    <p>被文化和旅游部确定为国家AAAAA级旅游景区<br>
                      光雾山地处川陕交界处，桃园南，因常年云雾绕而得名。<br>
                      含焦家河、韩溪河、燕子岩、普陀山等360多个景点。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/巴中光雾山.jpg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
          <div class="item">
            <div class="jumbotron">
              <div class="container">
                <div class="row">
                  <div class="col-md-8 animated slideInLeft">
                    <h2>米仓森林公园</h2>
                    <p>古有“巴西外户，蜀北岩疆”之称。<br>
                      森林覆盖率为97.3%，被称之为“天然氧吧”。<br>
                      始建于1995年，2007年，被评为“中国红叶之乡”。</p>
                  </div>
                  <div class="col-md-4 animated rotateIn">
                    <img src="img/米仓森林公园.jpeg" alt="" style="width: 350px;">
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-caption">
              旅游景点推荐
            </div>
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" role="button" data-side="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-side="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- poetry部分 -->
    <div class="poetry">
      <div class="content">
        <div class="container">
          <div class="page-header">
            <h1>邂逅巴中</h1>
          </div>
        </div>
        <div class="container">
          <div class="row">
            <div class="col-md-4">
              <div class="caption">
                <h3>王周《巴江》</h3>
                <p>巴江江水色，一带浓蓝碧。</p>
                <p>仙女瑟瑟衣，风梭晚来织。</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="caption">
                <h3>岑参《巴南舟中夜市》</h3>
                <p>渡口欲黄昏，归人争渡喧。</p>
                <p>近钟清野寺，远火点江村。</p>
                <p>见雁思乡信，闻猿积泪痕。</p>
                <p>孤舟万里夜，秋月不堪论。</p>
              </div>
            </div>
            <div class="col-md-4">
              <div class="caption">
                <h3>李商隐《夜雨寄北》</h3>
                <p>君问归期未有期，巴山夜雨涨秋池。</p>
                <p>何当共剪西窗烛，却话巴山夜雨时。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>
<script>
  $(function () {
    $('#myCarousel').carousel({
      interval: 2000,
    })
    $("#myCarousel li").click(function () {
      var index = $(this).attr("data-slide-to")
      $('#myCarousel').carousel(parseInt(index))
    })
  })
</script>